<div id="<?php echo $uniqid;?>" style="padding:5px">
    <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable">

        <tr bgcolor="#FFFFFF">
            <td class="tlabel">字段名称：</td>
            <td><input type="text" style="width: 500px;"
                       class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入字段名称.." v-model="params.title">
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">字段类型：</td>
            <td>
                <label><input type="radio" v-model="params.type" value="1" title="单行文本">单行文本</label>
                <label><input type="radio" v-model="params.type" value="2" title="多行文本">多行文本</label>
                <label><input type="radio" v-model="params.type" value="3" title="单选">单选</label>
                <label><input type="radio" v-model="params.type" value="4" title="多选">多选</label>
                <label><input type="radio" v-model="params.type" value="5" title="文件上传">文件上传</label>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF" v-if="params.type==3||params.type==4">
            <td class="tlabel">选项item：</td>
            <td>
                <div v-for="(vo,index) in items">
                    <input type="text" style="width: 500px;"
                           class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                           placeholder="请输入选项内容.." v-model="items[index]">
                    <a @click="itemdel(index)" v-if="index>0" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">移除</a>
                    <a @click="itemadd" v-else href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">添加</a>
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">备注：</td>
            <td><textarea v-model="params.remark" style="width:450px; height:68px;" class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox" placeholder="请输入值.." required="true"></textarea>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">排序：</td>
            <td><input name="sortorder" type="text"
                       class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入排序.." v-model="params.sortorder"></td>
        </tr>
    </table>
</div>
<script>
    var eventcomponenteditVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            material_id: "<?php echo $material_id;?>",
            items: [''],
            params: JSON.parse("<?php echo addslashes($dataset);?>"),
        },
        mounted() {
            this.init();
        },
        methods: {
            init: function () {
                this.params.type = this.params.type ? this.params.type : 1;
                this.params.sortorder = this.params.sortorder ? this.params.sortorder : 500;
                this.params.material_id = this.params.material_id ? this.params.material_id : this.material_id;
            },
            itemdel(index){
                this.items.splice(index, 1);
            },
            itemadd(){
                this.items.push('');
            }
        }
    });
    $(function () {
        $('#eventcomponentsubmit').click(function () {
            let act = (eventcomponenteditVm.params.id>0) ? 'edit' : 'add';
            eventcomponenteditVm.params.items = eventcomponenteditVm.items.join('|||');
            $.post('/admin/eventcomponent/' + act, eventcomponenteditVm.params, function (data) {
                if (data.ret === 0) {
                    $.messager.show({
                        title: '提示',
                        msg: data.msg,
                        timeout: 3000,
                        showType: 'slide'
                    });
                    if(typeof(eventcomponentReload)!=='undefined'){
                        eventcomponentReload();
                    }
                    $("#eventcomponentdlg").dialog('close');
                } else {
                    $.messager.alert('提示', data.msg, 'warning');
                }
            }, 'json');
        });
    });
</script>
